<template>
  <div>
    <Input v-model:value="value"/>
  </div>
  <footer class="flex mt-4">
    <div class="grow" />
    <Button type="default" class="mr-2" @click="scope.$hide">取消</Button>
    <Button type="primary" :loading="loading" @click="handleAction">确定</Button>
  </footer>
</template>

<script lang="ts" setup>
import {
  Button, Input, message,
} from 'ant-design-vue';
import { ref } from 'vue';

const props = defineProps({
  scope: {
    type: Object,
    default: () => ({}),
  },
  hide: {
    type: Function,
    default: () => ({}),
  },
});

const loading = ref(false);
const value = ref(props.scope?.role?.name || '');
const handleAction = async () => {
  try {
    loading.value = true;
    message.success('添加成功');
    props.scope.$hide();
    props.scope.reload(value.value);
  } finally {
    loading.value = false;
  }
};
</script>
